<template>
  <div>
    <h1>赋予员工权限</h1>
    <el-form ref="form" :model="form" label-width="80px">

      <el-form-item label="ID标识">
        <el-input v-model="form.id" style="width:30%;"></el-input>
      </el-form-item>

      <el-form-item label="权限pid">
        <el-input v-model="form.pid" style="width:30%;"></el-input>
      </el-form-item>

      <el-form-item label="拥有者uid" value-key="id">
        <el-select v-model="form.uid" placeholder="员工选择" @change="getSB()" style="width:30%;">
          <el-option v-for="item in userMessage"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路径配置">
        <template v-for="item in routeConfig">
          <el-radio v-model="form.path" :label="item.path" :key="item.id" @change="getPathName()" style="width:10%;">
            {{item.pathName}}
          </el-radio>
        </template>
      </el-form-item>


      <el-form-item label="路径图标">
        <template v-for="item in routeConfig">
          <el-radio v-show="item.pathIcon!=null" v-model="form.pathIcon" :label="item.pathIcon" :key="item.id"><i
            :class="item.pathIcon"></i></el-radio>
        </template>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submit()">分配权限</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import acl from "@/api/acl";
import route from "@/api/route";

export default {
  name: "Add",

  data() {
    return {

      form: {
        id: '',
        pid: '',
        uid: '',
        uname: '', //用方法传了
        path: '',
        pathIcon: '',
        pathName: '',//用方法传了
        urole:''
      },
      userMessage: {},
      routeConfig: {}
    }

  },
  created() {
    this.getAllUser()
    this.getRouteConfig()
  },
  methods: {
    getRouteConfig() {
      route.routeConfig()
        .then(response => {
          this.routeConfig = response.data.configList
        })
    },
    getPathName(){
      route.getPathName(this.form.path)
        .then(response=>{
          this.form.pathName =response.message
        })
    },
    getAllUser() {
      acl.getAdmins()
        .then(response => {
          this.userMessage = response.data.admins
        })
    },
    getSB() {
      acl.getSB(this.form.uid)
        .then(response => {
          this.form.uname = response.data.SB.name
          this.form.urole =response.data.SB.role
        })
    },
    submit() {
      acl.add(this.form)
        .then(response => {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          //强制刷新页面
          this.$router.go(0)


        })
    }
  }
}
</script>

<style scoped>

</style>
